<template>
<!--立项审批单-->
  <public-dialog
    title="立项审批单"
    width="60%"
    v-model:visible="visible"
    confirm-button-title="送审"
    :confirm-disabled="isLoading"
    :footer-button="state.type==='submit'"
    @on-confirm="onConfirm"
  >
    <template #default>
      <el-main
              v-loading="isLoading"
              element-loading-text="数据提交中……"
      >
          <el-form
                  ref="formRef"
                  :model="form"
                  :rules="state.type==='submit'?rules:null"
                  label-width="120px"
                  :disabled="state.type==='query'"
          >
              <el-row>
                  <el-col :span="11">
                      <el-form-item label="所属项目">
                          <el-input disabled :placeholder="form.projectName"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">
                      <el-form-item label="所属项目集">
                          <el-input disabled :placeholder="form.projectSetName"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="11">
                      <el-form-item label="项目编码">
                          <el-input disabled :placeholder="form.projectId"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">
                      <el-form-item label="项目类型">
                          <el-input disabled :placeholder="form.projectTypeName"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="11">
                      <el-form-item label="所属部门" prop="applyDepartmentId">
                          <el-select
                                  clearable class="input-width"
                                  v-model="form.applyDepartmentId"
                                  @change="departmentChange"
                          >
                              <el-option v-for="(item,index) in data.allDepartmentList" :key="index" :label="item.departmentName" :value="item.departmentId"></el-option>
                          </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">
                      <el-form-item label="申请人" prop="applyUserId">
                          <el-select
                              v-if="state.type==='submit'"
                                  clearable class="input-width"
                                  v-model="form.applyUserId"
                          >
                              <el-option v-for="(item,index) in state.departmentPersonList" :key="index" :label="item.userName" :value="item.userId"></el-option>
                          </el-select>
                          <el-input v-if="state.type==='query'" :placeholder="form.applyUserName"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="11">
                      <el-form-item label="会审部门" prop="reviewDepartmentId">
                          <el-select
                                  clearable class="input-width"
                                  v-model="form.reviewDepartmentId"
                          >
                              <el-option v-for="(item,index) in data.allDepartmentList" :key="index" :label="item.departmentName" :value="item.departmentId"></el-option>
                          </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">
                      <el-form-item label="议题名称" prop="name">
                          <el-input v-model="form.name" placeholder="请输入会议议题"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="11">
                      <el-form-item label="计划时间" prop="planStartTime">
                          <el-date-picker
                                  clearable
                                  v-model="form.valueTime"
                                  type="datetimerange"
                                  value-format="YYYY-MM-DD HH:mm:ss"
                                  range-separator="-"
                                  start-placeholder="开始时间"
                                  end-placeholder="结束时间"
                                  size="large"
                                  @change="datePickerChange"
                          />
                      </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">
                      <el-form-item label="业务单元" prop="businessUnit">
                          <el-input v-model="form.businessUnit" placeholder="请输入业务单元"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="24">
                      <el-form-item label="申请原因" prop="applyReason">
                          <el-input
                                  v-model="form.applyReason"
                                  :rows="5"
                                  type="textarea"
                                  placeholder="请输入审批原因"
                          />
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row v-if="state.type==='query'">
                  <el-col :span="11">
                      <el-form-item label="审批状态" prop="applyReason">
                          <el-input
                              placeholder="拒绝"
                          />
                      </el-form-item>
                  </el-col>
                  <el-col :span="2"></el-col>
                  <el-col :span="11">

                  </el-col>
              </el-row>
              <el-row v-if="state.type==='query'">
                  <el-col :span="24">
                      <el-form-item label="审批意见">
                          <el-input
                              v-model="form.opinion"
                              :rows="5"
                              type="textarea"
                          />
                      </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
      </el-main>
    </template>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {inject, nextTick, reactive, ref} from "vue";
import {ElForm, ElFormItem, ElRow, ElCol, ElSelect, ElOption, ElMain, ElLoading, ElMessage} from "element-plus";
import {department} from "@/api/project";
import {reserveInvestmentProjectLibraryApi} from "@/api/investment";
import {resetForm} from "@/common/utils/GlobalUtils";

const data = inject('state');
const isLoading = ref(false);
const visible = ref(false);
const form = reactive({
    projectId: '',
    projectName:'',
    projectSetName:'',
    projectTypeName:'',
    applyUserName:'',
    applyDepartmentId: '',
    applyUserId: '',
    reviewDepartmentId: '',
    name: '',
    valueTime:'',
    planStartTime:'',
    planEndTime:'',
    businessUnit:'',
    applyReason:'',
    projectSetId:'',
    projectTypeId:'',
    opinion:''
});

const state = reactive({
    departmentPersonList:[],
    type:'submit'
});

const rules = reactive({
    applyDepartmentId: [
        { required: true, message: '请选择所属部门', trigger: 'change' },
    ],
    applyUserId: [
        { required: true, message: '请选择申请人', trigger: 'change' },
    ],
    reviewDepartmentId: [
        { required: true, message: '请选择申请人', trigger: 'change' },
    ],
    planStartTime: [
        { required: true, message: '请选择计划时间', trigger: 'change' },
    ],
    name: [
        { required: true, message: '请输入议题名称', trigger: 'blur' },
    ],
    businessUnit: [
        { required: true, message: '请输入业务单元', trigger: 'blur' },
    ],
    applyReason: [
        { required: true, message: '请输入申请原因', trigger: 'blur' },
    ],
});

/**
 * 根据部门id查负责人
 * @param responsibleDepartmentId
 */
const getLeaderByDepartmentId = (responsibleDepartmentId) => {
    department.getLeaderByDepartmentId(responsibleDepartmentId).then((res) => {
        const { code, msg } = res;
        if (code == 200) {
            state.departmentPersonList = res.data;
        }
    });
};

/**
 * 根据部门查底下的人
 * @param e
 */
const departmentChange = (e) => {
    if(e){
        getLeaderByDepartmentId(e);
    }
}

/**
 * 弹窗确认按钮
 */
const formRef = ref(null);
const emits = defineEmits(['onSuccess']);
const onConfirm = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            isLoading.value = true;
            reserveInvestmentProjectLibraryApi.saveProjectApproval(form).then(res=>{
              if(res.code == 200){
                  isLoading.value = false;
                  visible.value = false;
                  ElMessage.success('提交成功!');
                  resetForm(form);
                  formRef.value.resetFields();
                  emits('onSuccess');
              }
            });
        } else {
            console.log('error submit!', fields)
        }
    })
}

/**
 * 时间被选择
 * @param e
 */
const datePickerChange = (e) => {
    if(e && e instanceof Array && e.length>0){
        form.planStartTime = e[0];
        form.planEndTime = e[1];
    }
    if(!e || (e instanceof Array && e.length === 0)){
        form.planStartTime = '';
        form.planEndTime = '';
    }
}

/**
 * 初始化赋值
 * @param data1
 * @param data2
 */
const _init = (data1,data2) => {
    for (let k1 in data1){
        for (let k2 in data2){
            if(k1 === k2){
                data1[k2] = data2[k1];
            }
        }
    }
}

/**
 * 立项审批单
 */
const getProjectApproval = (projectId) => {
    reserveInvestmentProjectLibraryApi.getProjectApproval(projectId).then(res=>{
        if(res.code == 200){
            _init(form,res.data);
        }
    })
}

/**
 * 展示弹窗
 * @param data
 */
const open = (data,type) => {
    isLoading.value = false;
    state.type = type;
    if(type==='submit'){
        setTimeout(()=>{
            formRef.value.resetFields();
            _init(form,data);
        },500);
    }
    if(type==='query'){
        getProjectApproval(data.projectId);
    }

    for (let k1 in data){
        for (let k2 in form){
            if(k1 === k2){
                form[k2] = data[k1];
            }
        }
    }
  visible.value = true;
}

defineExpose({
    open
});
</script>

<style lang="scss" scoped>
.input-width {
    width: 548px;
}
</style>